<template>
  <el-dialog
    v-el-drag-dialog
    title="历史登录记录"
    width="1024px"
    :visible.sync="visible"
  >
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      border
      stripe
      highlight-current-row
      element-loading-text="加载中"
      pagination
      :column="tableData.column"
      :data="tableData.data"
      :total="tableData.total"
      :height="400"
      :page-size="10"
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { userLoginHistoryQueryList } from '@/api'
  import { parseTime } from '@/utils'

  export default {
    name: 'login-history',
    data() {
      return {
        visible: false,
        temp: {},
        tableData: {
          total: 0,
          column: [
            {
              prop: 'userCode',
              label: '编码'
            },
            {
              prop: 'userName',
              label: '名称'
            },
            {
              prop: 'loginTime',
              label: '登录时间',
              width: 200,
              render: (h, { row }) => <span>{ row.loginTime && parseTime(row.loginTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'ip',
              label: 'IP',
              width: 150
            },
            {
              prop: 'realmName',
              width: 300,
              label: '登录域名'
            }
          ],
          data: []
        }
      }
    },
    watch: {
      visible: {
        handler(val) {
          if (val) this.fetchData({ currentPage: 1, pageSize: 10 })
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize,
          userId: this.temp.userId
        }
        const res = await userLoginHistoryQueryList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
